<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    okText="确定"
  >
    <a-spin :spinning="confirmLoading">
      <div class="task-execution-content">
        <!-- 任务基本信息 -->
        <a-descriptions title="任务信息" :column="2" bordered size="small">
          <a-descriptions-item label="任务名称">{{ taskInfo.taskName || taskInfo.productInfo }}</a-descriptions-item>
          <a-descriptions-item label="工种">{{ taskInfo.workTypeName }}</a-descriptions-item>
          <a-descriptions-item label="任务数量">{{ taskInfo.taskQuantity }}</a-descriptions-item>
          <a-descriptions-item label="已完成数量">{{ taskInfo.completedQuantity || 0 }}</a-descriptions-item>
          <a-descriptions-item label="协作类型">{{
            getCollaborationTypeText(taskInfo.collaborationType)
          }}</a-descriptions-item>
          <a-descriptions-item label="任务状态">{{ getStatusText(taskInfo.status) }}</a-descriptions-item>
        </a-descriptions>

        <!-- 参与者信息 -->
        <div style="margin-top: 16px">
          <h4>参与者信息</h4>
          <a-table
            :columns="participantColumns"
            :dataSource="participants"
            :pagination="false"
            size="small"
            :loading="participantLoading"
          >
            <template slot="collaborationType" slot-scope="text">
              <a-tag :color="getCollaborationTypeColor(text)">
                {{ getCollaborationTypeText(text) }}
              </a-tag>
            </template>
            <template slot="participationRatio" slot-scope="text">
              {{ text ? (text * 100).toFixed(1) + '%' : '0%' }}
            </template>
            <template slot="claimedQuantity" slot-scope="text">
              {{ text || 0 }}
            </template>
            <template slot="claimedTime" slot-scope="text">
              {{ text ? formatDate(text, 'YYYY-MM-DD HH:mm:ss') : '-' }}
            </template>
          </a-table>
        </div>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import { getAction } from '@/api/manage'
import { formatDate } from '@/utils/date'

export default {
  name: 'TaskExecutionModal',
  data() {
    return {
      title: '任务执行情况',
      visible: false,
      confirmLoading: false,
      participantLoading: false,
      taskInfo: {},
      participants: [],
      participantColumns: [
        {
          title: '员工姓名',
          dataIndex: 'employeeName',
          width: 120,
        },
        {
          title: '领取数量',
          dataIndex: 'claimedQuantity',
          width: 100,
          scopedSlots: { customRender: 'claimedQuantity' },
        },
        {
          title: '领取时间',
          dataIndex: 'claimedTime',
          width: 160,
          scopedSlots: { customRender: 'claimedTime' },
        },
        {
          title: '备注',
          dataIndex: 'remark',
        },
      ],
    }
  },
  methods: {
    show(record) {
      this.visible = true
      this.taskInfo = { ...record }
      this.loadParticipants(record.id)
    },
    async loadParticipants(taskId) {
      this.participantLoading = true
      try {
        const res = await getAction(`/mes/taskParticipant/getByTaskId/${taskId}`)
        if (res.success) {
          this.participants = res.result || []
        } else {
          this.$message.error('获取参与者信息失败：' + res.message)
        }
      } catch (error) {
        console.error('获取参与者信息失败:', error)
        this.$message.error('获取参与者信息失败')
      } finally {
        this.participantLoading = false
      }
    },
    getCollaborationTypeText(type) {
      console.log('type................', type)

      const typeMap = {
        0: '独立完成',
        1: '协作完成',
        2: '分段完成',
      }
      return typeMap[type] || type
    },
    getCollaborationTypeColor(type) {
      const colorMap = {
        0: 'blue',
        1: 'green',
        2: 'orange',
      }
      return colorMap[type] || 'default'
    },
    getStatusText(status) {
      const statusMap = {
        0: '待领取',
        1: '已领取',
        2: '进行中',
        3: '已完成',
        4: '已暂停',
        5: '部分完成',
      }
      return statusMap[status] || '未知'
    },
    formatDate(date, format) {
      return formatDate(date, format)
    },
    handleOk() {
      this.handleCancel()
    },
    handleCancel() {
      this.visible = false
      this.taskInfo = {}
      this.participants = []
    },
  },
}
</script>

<style scoped>
.task-execution-content {
  max-height: 600px;
  overflow-y: auto;
}
</style>
